<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="问卷标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入问卷标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="问卷标签" prop="wjTag">
        <el-input
          v-model="queryParams.wjTag"
          placeholder="请输入问卷标签"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="问卷说明" prop="wjDes">
        <el-input
          v-model="queryParams.wjDes"
          placeholder="请输入问卷说明"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备用字段1" prop="remarkOne">
        <el-input
          v-model="queryParams.remarkOne"
          placeholder="请输入备用字段1"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备用字段2" prop="remarkTwo">
        <el-input
          v-model="queryParams.remarkTwo"
          placeholder="请输入备用字段2"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备用字段3" prop="remarkThree">
        <el-input
          v-model="queryParams.remarkThree"
          placeholder="请输入备用字段3"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['kenuo:wenjuan:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['kenuo:wenjuan:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['kenuo:wenjuan:remove']"
          >删除</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['kenuo:wenjuan:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="wenjuanList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="${comment}" align="center" prop="id" /> -->
      <el-table-column label="问卷标题" align="center" prop="title" />
      <el-table-column label="问卷标签" align="center" prop="wjTag">
        <template slot-scope="scope">
          <!-- {{ scope.row.vtype == 1 ? "未绑定" : "已绑定" }} -->

          <div v-show="scope.row.wjTag == 1">盆底肌修复</div>
          <div v-show="scope.row.wjTag == 2">产后恢复</div>
          <div v-show="scope.row.wjTag == 3">训练</div>
        </template>
      </el-table-column>

      <el-table-column label="问卷说明" align="center" prop="wjDes" />
      <el-table-column label="创建时间" align="center" prop="remarkOne" />
      <!-- <el-table-column label="备用字段2" align="center" prop="remarkTwo" />
      <el-table-column label="备用字段3" align="center" prop="remarkThree" /> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleQuestion(scope.row)"
            v-hasPermi="['kenuo:wenjuan:edit']"
            >添加题目</el-button
          >

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['kenuo:wenjuan:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['kenuo:wenjuan:remove']"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleLookInfo(scope.row)"
            v-hasPermi="['kenuo:wenjuan:edit']"
            >查看题目</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加题目页面 -->

    <el-dialog
      :title="title"
      :visible.sync="questionShow"
      width="600px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div v-for="(item, index) in itemList" :key="indexwe">
          <div style="display: flex; width: 100%">
            <img
              src="../../../assets/homePage/insertQuestion.png"
              v-if="indexwe == totalRadio"
              style="
                width: 30px;
                height: 30px;
                cursor: pointer;
                margin-left: 30px;
              "
              @click="addQuestionlist(indexwe)"
            />
            <img
              src="../../../assets/homePage/deleteQuestion.png"
              v-else
              style="
                width: 30px;
                height: 30px;
                cursor: pointer;
                margin-left: 30px;
              "
              @click="deleteQuestionlist(indexwe)"
            />
            <el-form-item label="问题标题" prop="queTitle">
              <el-input
                v-model="item.queTitle"
                placeholder="请输入您的问题"
                style="flex-shrink: 0; width: 380px"
              />
            </el-form-item>
          </div>

          <div
            style="margin-left: 150px; margin-bottom: 20px; margin-top: -2px"
            v-for="(itemName, indexlanle) in item.questionOptions"
            :key="indexlanle"
          >
            <div style="display: flex">
              <div style="width: 100px; height: 20px">
                <el-radio
                  v-model="item.radio"
                  label="itemName.answer"
                  style="margin-top: -2px"
                  v-show="itemName.answer == '' ? false : true"
                  >{{ itemName.answer }}</el-radio
                >
              </div>
              <img
                v-show="indexlanle === item.total - 1 ? true : false"
                src="../../../assets/homePage/add.png"
                style="
                  width: 15px;
                  height: 15px;
                  cursor: pointer;
                  margin-left: 40px;
                "
                @click="addItemRadio(indexwe, indexlanle)"
              />
              <img
                src="../../../assets/homePage/delete.png"
                :class="[
                  indexlanle === item.total - 1 ? 'radioShow1' : 'radioShow2',
                ]"
                v-show="itemName.answer == '' ? false : true"
                @click="deleteRadio(indexwe, indexlanle)"
              />
            </div>
            <div v-show="indexwe === indexShowRadio ? true : false">
              <div
                style="display: flex; margin-top: 6px"
                v-show="indexlanle === numberShowRadio ? true : false"
              >
                <input
                  style="width: 110px; height: 28px"
                  class="inputStyle"
                  placeholder="请添加选项"
                  v-model="radioTypeName"
                />
                <el-input-number
                  size="mini"
                  v-model="numStyle"
                  :min="0"
                  :max="100"
                  style="width: 90px; margin-left: 20px"
                ></el-input-number>
                <div style="margin-top: 3px">
                  <span
                    style="
                      font-size: 20px;
                      color: #1890ff;
                      cursor: pointer;
                      margin-left: 10px;
                      margin-top: 5px;
                    "
                  >
                    <i
                      class="el-icon-circle-check"
                      @click="insertRadioNamelable(indexwe, indexlanle)"
                    ></i>
                  </span>
                  <span
                    style="
                      font-size: 20px;
                      color: red;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                  >
                    <i
                      class="el-icon-circle-close"
                      @click="delteteRadioNamelable"
                    ></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormRadio">确 定</el-button>
        <el-button @click="cancelQuestion">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加数据radio页面 -->

    <!-- <el-dialog
      :title="title"
      :visible.sync="radioShow"
      width="600px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelQuestion">取 消</el-button>
      </div>
    </el-dialog> -->

    <!-- 客户绑定的设备列表 -->
    <el-dialog
      title="问题列表"
      :visible.sync="dialogTableVisible"
      width="760px"
    >
      <el-table :data="showQuestuionList">
           <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          property="queTitle"
          label="问题标题"
          width="150"
        ></el-table-column>
        <el-table-column
          property="questionOptions"
          label="问题选项"
          width="200"
        >

              <template slot-scope="scope">
              <div v-for="(item ,index) in scope.row.questionOptions " :key="indexwe">
                选项：{{item.answer}}  分数：{{item.answerScore}}
                </div>

        </template>


        </el-table-column>
        <el-table-column
          property="remarkOne"
          label="创建时间"
          width="155"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope" v-if="scope.row.userId !== 1">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeleteQuestion(scope.row)"
              v-hasPermi="['kenuo:wenjuan:remove']"
              >删除</el-button
            >
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleLookInfoQuestion(scope.row)"
              v-hasPermi="['kenuo:wenjuan:edit']"
              >查看详情</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div style="display: flex; justify-content: space-between">
          <el-form-item label="问卷标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入问卷标题" />
          </el-form-item>
          <el-form-item label="问卷标签" prop="wjTag">
            <!-- <el-input v-model="form.wjTag" placeholder="请输入问卷标签" /> -->
            <el-select v-model="form.wjTag" placeholder="请输入问卷标签">
              <el-option label="盆底肌修复" value="1"></el-option>
              <el-option label="产后恢复" value="2"></el-option>
              <el-option label="训练" value="3"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- <el-form-item label="问卷说明" prop="wjDes">
          <el-input v-model="form.wjDes" placeholder="请输入问卷说明" />
        </el-form-item> -->

        <el-form-item label="问卷说明" prop="wjDes">
          <!-- <el-input v-model="form.des" placeholder="请输入视频说明" /> -->
          <el-input
            type="textarea"
            :rows="8"
            v-model="form.wjDes"
            placeholder="请输入问卷说明"
            style="margin-top: 15px"
          >
          </el-input>
        </el-form-item>

        <!-- <el-form-item label="备用字段1" prop="remarkOne">
          <el-input v-model="form.remarkOne" placeholder="请输入备用字段1" />
        </el-form-item>
        <el-form-item label="备用字段2" prop="remarkTwo">
          <el-input v-model="form.remarkTwo" placeholder="请输入备用字段2" />
        </el-form-item>
        <el-form-item label="备用字段3" prop="remarkThree">
          <el-input v-model="form.remarkThree" placeholder="请输入备用字段3" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listWenjuan,
  getWenjuan,
  delWenjuan,
  addWenjuan,
  updateWenjuan,
  addQueType,
  showQuestuion,
  delWenjuanQuestion,
  answerList,
} from "@/api/kenuo/wenjuan";

export default {
  name: "Wenjuan1",
  data() {
    return {
      dialogTableVisible: false,
      // 遮罩层
      // itemList:[1,2],
      itemList: [
        {
          queTitle: "",
          questionOptions: [{ answer: "", answerScore: 0 }],
          total: 1,
          radio: "",
          wjId: "",
        },
      ],
      idList: "",
      showQuestuionList: [],
      radioTypeName: "",
      LookId: "",
      radioName: "",
      totalRadio: "",
      numberShowRadio: "",
      indexShowRadio: "",
      numStyle: 0,
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      wenjuanList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      questionShow: false,
      // radio显示层
      radioShow: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        wjTag: null,
        wjDes: null,
        remarkOne: null,
        remarkTwo: null,
        remarkThree: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          {
            required: true,
            message: "问卷标题不能为空",
            trigger: "blur",
          },
        ],
        wjTag: [
          {
            required: true,
            message: "问卷标签不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.totalRadio = this.itemList.length - 1;
  },
  methods: {
    handleLookInfo(row) {
      this.dialogTableVisible = true;
      const id = row.id || this.ids;
      let data = {
        wjId: id,
      };
      this.LookId = id;
      showQuestuion(data).then((response) => {
        console.log(response)
        this.showQuestuionList = response.rows;
      });
    },
    submitFormRadio() {
      for (var i = 0; i < this.itemList.length; i++) {
        this.itemList[i].wjId = this.idList;
      }
      addQueType(this.itemList).then((response) => {
        console.log("rf4tt65", response);
        this.$modal.msgSuccess("新增成功");
        this.getList();
        this.questionShow = false;
      });
    },

    deleteQuestionlist(index) {
      this.itemList.splice(indexwe, 1);
      this.totalRadio = this.itemList.length - 1;
    },

    addQuestionlist() {
      let dist = {
        queTitle: "",
        questionOptions: [{ answer: "", answerScore: 0 }],
        total: 1,
        radio: "",
        wjId: "",
      };
      this.itemList.push(dist);
      this.totalRadio = this.itemList.length - 1;
    },
    insertRadioNamelable(index, num) {
      if (this.radioTypeName == "") {
        this.$message.error("选项不能为空");
      } else {
        var type = 0;
        for (var i = 0; i < this.itemList[indexwe].questionOptions.length; i++) {
          if (
            this.itemList[indexwe].questionOptions[i].answer == this.radioTypeName
          ) {
            type = 1;
          } else {
            type = 0;
          }
        }

        if (type == 0) {
          let listDict = {
            answer: this.radioTypeName,
            answerScore: this.numStyle,
          };

          this.itemList[indexwe].questionOptions.push(listDict);
          this.itemList[indexwe].total = this.itemList[indexwe].total + 1;
          this.itemList[indexwe].radio = this.radioTypeName;
          //  this.itemList[index].wjId=this.idList
          this.numberShowRadio = "";
          this.indexShowRadio = "";
        } else {
          this.$message.error("选项重复,请重新输入!");
        }

        for (var i = 0; i < this.itemList[indexwe].questionOptions.length; i++) {
          if (this.itemList[indexwe].questionOptions[i].answer == "") {
            this.itemList[indexwe].questionOptions.splice(i, 1);
            this.itemList[indexwe].total = this.itemList[indexwe].total - 1;
          }
        }
      }
    },

    delteteRadioNamelable() {
      this.numberShowRadio = "";
      this.indexShowRadio = "";
    },

    addItemRadio(index, num) {
      this.numberShowRadio = num;
      this.indexShowRadio = indexwe;
    },
    deleteRadio(index, num) {
      if (this.itemList[indexwe].total == 1) {
        this.$message.error("不能再删除了");
      } else {
        this.numberShowRadio = "";
        this.indexShowRadio = "";
        this.itemList[indexwe].questionOptions.splice(num, 1);
        this.itemList[indexwe].total = this.itemList[indexwe].total - 1;
      }
    },

    handleChange(value) {
      console.log(value);
    },

    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listWenjuan(this.queryParams).then((response) => {
        this.wenjuanList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 取消按钮
    cancelQuestion() {
      this.questionShow = false;
      this.reset();
      this.numberShowRadio = "";
      this.indexShowRadio = "";
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        wjTag: null,
        wjDes: null,
        remarkOne: null,
        remarkTwo: null,
        remarkThree: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /** 添加问题按钮操作 */
    handleQuestion(row) {
      this.reset();
      this.questionShow = true;
      this.title = "新增问题";
      const id = row.id || this.ids;
      this.idList = id;

      this.itemList = [
        {
          queTitle: "",
          questionOptions: [{ answer: "", answerScore: 0 }],
          total: 1,
          radio: "",
          wjId: "",
        },
      ];
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getWenjuan(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateWenjuan(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWenjuan(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    handleLookInfoQuestion(row) {
      const id = row.id || this.ids;

      let data = {
        "queId": id,
      };
      answerList(data).then((response) => {
        console.log("frfgrtg5", response);
      });
    },
    handleDeleteQuestion(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否刪除确认此数据项？")
        .then(function () {
          return delWenjuanQuestion(ids);
        })
        .then(() => {
          this.handleLookInfo(this.LookId);
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认问卷标题为"' + row.title + '"的数据项？')
        .then(function () {
          return delWenjuan(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "kenuo/wenjuan/export",
        {
          ...this.queryParams,
        },
        `wenjuan_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>


<style scoped>
.inputStyle {
  /* outline:#1890ff dotted ; */
  outline: none;
  /* outline-color:#1890ff ; */
  border: 1px solid #dcdfe6;
  /* outline-width:0.5px; */
  border-radius: 4px;
  color: #606266;
  font-size: 10px;
  text-indent: 8px;
}

.numberStyle {
  width: 80px;
  height: 40px;
}

.radioShow1 {
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin-left: 8px;
}
.radioShow2 {
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin-left: 40px;
}
</style>
